<template>
  <div class="queryResults">
    <x-header>档案查询结果</x-header>
    <div class="queryResults-items" v-for="(item,index) in dataList" :key="index" @click.stop="clickGoTo($event, item)">
      <label class="queryResults-items-images">
        <img class="queryResults-items-image" v-show="item.needDownLoad" v-if="item.checked" src="../../assets/img/securityCheckImg/unselected.png" alt="" @click.stop="onChoice(item)">
        <img class="queryResults-items-image" v-else src="../../assets/img/securityCheckImg/selected.png" alt=""  @click.stop="onChoice(item)">
        <img class="queryResults-items-image" v-show="!item.needDownLoad" src="../../assets/img/securityCheckImg/unselected.png" alt="">
        <!-- <input type="checkbox" class="queryResults-items-checkbox"> -->
      </label>
      <div class="queryResults-items-content">
        <div class="queryResults-items-content-line"></div>
        <div class="queryResults-items-content-top">
          <div class="queryResults-items-content-serialNumber">{{index + 1}}</div>
          <div class="queryResults-items-details">
            <div class="queryResults-items-details-title">
              <div class="queryResults-items-details-name">{{item.CONS_NAME}}</div>
               <div class="queryResults-items-details-staus">{{item.CONS_STAT?"在用":"下线" }}</div>
            </div>
            <div class="queryResults-items-details-number">
              用户编号：{{item.CONS_NO}}
            </div>
          </div>
        </div>
        <div class="queryResults-items-content-bottom">
          <img  class="queryResults-items-icon" src="../../assets/img/securityCheckImg/address.png" alt="">
          <div class="queryResults-items-address">{{item.CONS_ADDR}}</div>
        </div>
      </div>
    </div>
    <div style="height: 1.4rem;"></div>
    <div class="queryResults-footer">
      <label class="queryResults-footer-Choice">
        <input type="checkbox" class="queryResults-items-checkbox" @change="onChoiceAll">
        <img class="queryResults-footer-image" v-if="onChoiceAllShow" src="../../assets/img/securityCheckImg/unselected.png" alt="">
        <img class="queryResults-footer-image" v-else src="../../assets/img/securityCheckImg/selected.png" alt="">
        <div class="queryResults-footer-title">全选</div>
      </label>
      <div class="queryResults-footer-download btn-public" @click.stop="downUserBaseInfo">
        下载
      </div>
    </div>
  </div>
</template>

<script>
import { XHeader, Scroller } from "vux";
import Vue from "vue";
import { getsn } from "@/utils/getsn";
import { insertUserTable, downUserInfo } from "@/utils/serviceUtils";
import { CallNet } from "@/utils/public";
export default {
  data() {
    return {
      dataList: [],
      dataListLine: [],
      load: true,
      loadUp: "up",
      params: null,
      onChoiceAllShow: true,
      choiceArr: []
    };
  },
  components: {
    XHeader,
    Scroller
  },
  methods: {
    clickGoTo(event, item) {
      if (item.needDownLoad) {
        this.$vux.toast.text("需要下载");
      } else {
        this.$router.push({
          path: "/transactInfo",
          query: { CONS_NO: item.CONS_NO }
        });
        localStorage.setItem("CONS_NO",item.CONS_NO)
      }
    },
    onChoice(item) {
      if (item.checked) {
        item.checked = false;
        this.choiceArr.push(item.CONS_NO);
        Vue.set(this, "choiceArr", this.choiceArr);
      } else {
        for (let i = 0; i < this.choiceArr.length; i++) {
          if (this.choiceArr[i] == item.CONS_NO) {
            this.choiceArr.splice(i, 1);
            Vue.set(this, "choiceArr", this.choiceArr);
          }
        }
        item.checked = true;
      }
      const arrData = this.dataList.map(function(value) {
        return value.checked;
      });
      for (let i = 0; i < arrData.length; i++) {
        if (arrData[i] == true) {
          Vue.set(this, "onChoiceAllShow", true);
          return;
        }
      }
      Vue.set(this, "onChoiceAllShow", false);
    },
    onChoiceAll(event) {
      Vue.set(this, "onChoiceAllShow", !event.target.checked);
      const arrData = this.dataList.map(function(value) {
        if (value.needDownLoad) {
          value.checked = !event.target.checked;
        }
        return value;
      });
      const arrDataID = this.dataList.map(function(value) {
        return value.CONS_NO;
      });
      if (event.target.checked) {
        Vue.set(this, "choiceArr", arrDataID);
      } else {
        Vue.set(this, "choiceArr", []);
      }
    },
    downUserBaseInfo() {
      console.log(this.choiceArr);
      const _this = this;
      for (let i = 0; i < _this.choiceArr.length; i++) {
        downUserInfo(_this.choiceArr[i], _this.downLoadCallback);
      }
      // downUserInfo("201017681966", _this.downLoadCallback);
    },
    downLoadCallback() {
      this.$vux.toast.text("下载成功");
      this.getDataList();
    },
    getDataList() {
      const _this = this;
      // window.onscroll = _this.onScrollHandle();
      _this.params = JSON.parse(this.$route.query.params);
      console.log(123, this.$route.query.type);
      Vue.set(_this, "params", _this.params);
      _this.$vux.loading.show({
						text: '加载中'
				});
      let querySql = {
        jToken: "",
        whereClause: "select A.* from CUST_ADDRINFO A where 1=1 ",
        whereArgs: []
      };
      console.log(111111111,this.$route.query.type)
      if (this.$route.query.type == 1) {
        _this.params.data.SN = getsn();
        console.log(_this.params);
        //1:线上  2:本地
        CallNet(
          "",
          "",
          _this.params,
          function(data) {
            let dataArr = data.result.DATA.CONS_LIST.map(function(value) {
              value.checked = true;
              value.needDownLoad = true;
              return value;
            });
            // Vue.set(_this, "dataList", dataArr);
            AndroidApi.queryTableData(
              JSON.stringify({
                whereClause: "SELECT A.* FROM CUST_ADDRINFO A",
                whereArgs: []
              }),
              function(msg) {
                const dataArrLocal = msg.result.map(function(value) {
                  return value;
                });
                for (let i in dataArr) {
                  for (let j in dataArrLocal) {
                    if (dataArr[i].CONS_NO == dataArrLocal[j].CONS_NO) {
                      dataArr[i].needDownLoad = false;
                    }
                  }
                }
                const arrData = msg.result.map(function(value) {
                  return value.checked;
                });
                for (let i = 0; i < arrData.length; i++) {
                  if (arrData[i] == true) {
                    Vue.set(_this, "onChoiceAllShow", true);
                    return;
                  }
                }
                Vue.set(_this, "dataList", dataArr);
                _this.$vux.loading.hide();
              }
            );
          },
          function(error) {}
        );
      } else {
        if (_this.params.METER_NO) {
          querySql.whereClause =
            querySql.whereClause +
            " AND EXISTS (SELECT 1 " +
            " FROM MP_INFO MP, " +
            " CUST_GMINFO DT " +
            " WHERE DT.CONS_NO = A.CONS_NO " +
            ' AND DT.ASSET_NO = "' +
            _this.params.METER_NO +
            '")';
          delete _this.params.METER_NO;
        }
        if (_this.params.TEL) {
          querySql.whereClause =
            querySql.whereClause +
            " AND EXISTS (SELECT 1 " +
            " FROM CUST_CONTACTINFO CT,CONT_ CHANL CL" +
            " WHERE CT.CONTACT_ID = CL.CONTACT_ID" +
            " AND CT.CONS_NO = A.CONS_NO" +
            ' AND CL.CONT_CHANL_NO = "' +
            _this.params.TEL +
            '"';
          (")");
          delete _this.params.TEL;
        }
        for (let key in _this.params) {
          if (_this.params[key]) {
            querySql.whereClause =
              querySql.whereClause +
              " AND " +
              key +
              "= '" +
              _this.params[key] +
              "'";
          }
        }
        console.log(querySql);
        AndroidApi.queryTableData(JSON.stringify(querySql), function(msg) {
          console.log(msg);
          const dataArr = msg.result.map(function(value) {
            value.checked = true;
            value.needDownLoad = false;
            return value;
          });
          Vue.set(_this, "dataList", dataArr);
          _this.$vux.loading.hide();
        });
      }
    }
  },
  mounted() {
    this.getDataList();
  }
};
</script>
<style scoped lang="less">
@import "../../assets/less/style.less";
.queryResults {
  &-items {
    width: 100%;
    height: 2.5rem;
    margin-top: 0.2rem;
    display: flex;
    justify-content: flex-start;
    background-color: #ffffff;
    &-images {
      width: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f1f3f8;
      position: relative;
    }
    &-checkbox {
      width: 0;
      height: 0;
    }
    &-image {
      width: 0.6rem;
      height: 0.6rem;
    }
    &-content {
      flex: 1;
      padding-top: 0.3611rem;
      padding-left: 0.2667rem;
      position: relative;
      &-line {
        width: 0.1111rem;
        height: 2.2222rem;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -1.1111rem;
        background-color: #159bfd;
        border-radius: 0.1111rem;
      }
      &-top {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        border-bottom: 1px solid #d9daeb;
        padding-left: 0.1389rem;
      }
      &-bottom {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 0.2083rem;
        margin-top: 0.0694rem;
      }
      &-serialNumber {
        width: 0.4444rem;
        height: 0.4444rem;
        border-radius: 50%;
        background-color: #96a3b0;
        text-align: center;
        line-height: 0.45rem;
        color: #ffffff;
        margin-right: 0.1389rem;
        margin-top: 0.0833rem;
      }
    }
    &-details {
      flex: 1;
      padding-right: 0.4167rem;
      &-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      &-name {
        font-size: 0.4444rem;
        color: #444444;
      }
      &-staus {
        width: 1.5833rem;
        height: 0.5rem;
        line-height: 0.5rem;
        background-color: #159bfd;
        border-radius: 0.5rem;
        text-align: center;
        color: #ffffff;
      }
      &-number {
        color: #444444;
        font-size: 0.4167rem;
        margin-top: 0.1667rem;
        margin-bottom: 0.2083rem;
      }
    }
    &-icon {
      width: 0.2778rem;
      height: 0.2778rem;
      margin-right: 0.2083rem;
    }
    &-address {
      color: #000000;
      font-size: 0.3rem;
    }
  }
  &-footer {
    width: 100%;
    height: 1.2rem;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    &-Choice {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    .queryResults-items-checkbox {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }
    &-image {
      width: 0.6rem;
      height: 0.6rem;
      margin-right: 0.2083rem;
    }
    &-title {
      color: #444444;
      font-size: 0.4444rem;
    }
    &-download {
      flex: 1;
      height: 100%;
    }
  }
}
</style>


